<template>
	<view class="page">
		<headnav leftText="作品详情"></headnav>
		<view class="b-bg detail" id="detail" v-show="obj.title">
			<view class="videoBox" v-if="curentTyep == 'mp4'">
				<video :src="mp4Url" id="video" controls="" v-show="mp4Url"></video>
			</view>
			<view class="wordBox" v-if="curentTyep !== 'mp4' && wordurl">
				<iframe :src="wordurl" frameborder="0" class="iframe"></iframe>
			</view>
			<view class="imgBox middle" @tap="showImg" v-if="curentTyep == 'png' || curentTyep == 'jpg' || curentTyep == 'jpeg'"  :style="{ backgroundImage: `url(${imgurl})`}"></view>
			<!-- <view class="w-list">
				<view class="word-item" @tap="change(index)" :class="{active:index == curent}" v-for="(item,index) in works" :key="index">
					<text v-if="index === 0">{{obj.activity_name + "." + $ft.getFileType(item.file_name)}}</text>
					<text v-if="index > 0">{{obj.activity_name + '_' + (index + 1)  + "." + $ft.getFileType(item.file_name)}}</text>
				</view>
			</view> -->
			<view class="d-infor">
				<view class="title">
					{{obj.title}}
				</view>
				<view class="part">
					<!-- <view class="p">活动名称：{{obj.activity_name}}</view> -->
			<!-- 	<view class="p">
						参与年份：{{obj.year}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						作品编号：{{obj.id}}号
				  </view> -->
				<!--  <view class="p">
						投稿角色：{{obj.role_name}}&nbsp;&nbsp;&nbsp;&nbsp;
					  <text>作品类型：{{obj.category_name}}</text>	 
				  </view> -->
			<!-- 	  <view class="p" v-show="obj.status">
						审核状态：{{$ft.sh(obj.status)}};
				  </view> -->
				</view>
				<view class="part">
					<view class="p">
						姓名：{{obj.username}}
				  </view>
				  <view class="p">
						区域：{{obj.region}}
				  </view>
				  <view class="p" v-show="obj.school">
					   单位：{{obj.school}}
				  </view>
				<!--  <view class="p">
				  		院系：{{obj.colleges}}
				  </view>
				  <view class="p">
				  		专业：{{obj.major}}
				  </view> -->
				  <view class="p" v-show="obj.classname">
				  	  班级：{{obj.classname}} 
				  </view>
				  <view class="p" v-show="obj.guide_teacher">
				  	  指导老师：{{obj.guide_teacher}} 
				  </view>
				</view>
				<view class="num" v-show="obj.collect_total">
					点赞数：{{obj.collect_total}}
				</view>
			</view>
			<view class="btnBox" v-show="obj.is_vote_btn == 1">
				<!-- <view class="bt bt-color">分享</view> -->
				<view class="bt bt-a" @tap="eventTp">投票</view>
			</view>
			<view class="lookImgBox" v-show='lookImg' @tap='closeImg'>
				<img :src="imgurl"  class="img" alt="" @tap.stop='defalut'>
			</view>
		</view>
		<loginD ref='loginx'></loginD>
	</view>
	
</template>
<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				id:"",
				obj:{},
				curent:0,
				curentTyep:'',
				mp4Url:'',
				wordurl:'',
				imgurl:'',
				video:[],
				works:[],
				lookImg:false
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo();
		},
		methods:{
			async getInfo(){
				const res = await this.$http({
					url:'article/info/'+ this.id,
					method:'get',
					data:{}
				})
				this.obj = res.data;
				
				// console.log(res);
				this.works = res.data.file_list;
				this.getCurrent(this.curent);
			},
			showImg() {
				this.lookImg = true;
			},
			closeImg() {
				this.lookImg = false;
			},
			getCurrent(curent) {
				console.log(this.works);
				this.curentTyep = this.works[this.curent].ext;
				console.log(this.curentTyep);
				if(this.curentTyep == 'mp4') {
					this.mp4Url =  this.works[this.curent].file_url
					this.wordurl = "";
					this.imgurl = "";
				} else if(this.curentTyep == 'jpg' || this.curentTyep == 'png' || this.curentTyep == 'jpeg'){
					this.imgurl = this.works[this.curent].file_url
					this.wordurl = "";
					this.mp4Url= "";
				} else {
					console.log(this.works[this.curent]);
					if(!this.works[this.curent].file_url) {
						this.toast('暂无预览地址')
						this.wordurl = "";
					} else {
						this.wordurl =  this.works[this.curent].file_url
					}
				}
			},
			change(index) {
				this.curent = index;
				this.getCurrent(this.curent);
			},
			defalut() {
				console.log('defalut');
			},
			async eventTp() {
				const _this = this;
				console.log(_this.obj);
				uni.showModal({
					title: '提示',
					content: '您今天还有'+ _this.obj.vote_remainder_num +'次投票机会是否确定投票',
					success: async(res) => {
						if (res.confirm) {
							const res = await this.$http({
								url:"user/vote",
								method:'post',
								data:{
									id:_this.obj.id
								}
							})
							if(res.residue_num) {
								_this.obj.vote_remainder_num --;
								_this.obj.total_vote ++;
								_this.obj.is_vote = true;
								_this.toast('投票成功')
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding-top: 115rpx;
		width: 100%;
		min-height: 100%;
		background-color: #f7f7f7;
	}
  #detail {
	  padding: 20rpx 28rpx;
  }
  .lookImgBox {
	  position: fixed;
	  left:0;
	  right: 0;
	  top:0;
	  bottom: 0;
	  background-color: #000;
	  z-index: 99;
	  @include center();
	  .img {
		  width: 100%;
		  height: auto;
	  }
  }
  .videoBox {
	  width: 100%;
	  border-radius:20rpx;
	  overflow: hidden;
	  width: 100%;
	  height: 415rpx;
	  margin-bottom: 22rpx;
	  #video {
		  width: 100%;
		  height: 100%;
	  }
  }
  .wordBox {
	  width: 100%;
	  height: 500rpx;
	  border-radius:20rpx;
	  overflow: hidden;
	  margin-bottom: 30rpx;
	  .iframe {
		  width: 100%;
		  height: 100%;
	  }
  }
  .imgBox {
	  width: 100%;
	  height: 400rpx;
	  margin-bottom: 22rpx;
	  border-radius:20rpx;
	  overflow: hidden;
	  &.middle{
		  background-size: contain;
	  }
  }
  .w-list {
	  border-radius:20rpx;
	  background-color: #fff;
	  padding: 34rpx 28rpx 24rpx 28rpx;
	  margin-bottom: 20rpx;
	  .word-item {
		  margin-bottom: 10rpx;
		  &.active {
			  color:#eaa057;
		  }
	  }
  }
  .d-infor {
	  border-radius:20rpx;
	  background-color: #fff;
	  padding: 34rpx 28rpx;
	  
	  .title {
		  font-weight: bold;
		  @include text();
	  }
	  .part {
		  font-size: 28rpx;
		  border-bottom: 1px solid #f2f2f2;
		  padding-top: 26rpx;
		  padding-bottom: 26rpx;
		  .p {
			  margin-bottom: 18rpx;
		  }
	  }
	  .num {
		  padding-top: 20rpx;
	  }
  }
  .btnBox {
	  @include bt-s-1();
	   padding: 50rpx 40rpx;
  }
</style>
